<script setup>
import {onMounted, ref, watch} from "vue";

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ''
  },
  // throttle: {
  //   type: Object,
  //   default: () => {
  //     return {
  //       leading: 500,
  //       trailing: 500,
  //       initVal: true
  //     }
  //   }
  // },
  preview: {
    type: Boolean,
    default: false
  },
  style: {
    type: Object,
    default: () => {
      return {
        width: '40px',
        height: '40px',
        borderRadius: '4px'
      }
    }
  }
});

const loading = ref(props.loading);
// const throttle = ref(props.throttle);
const imageUrl = ref(props.url);
const style = ref(props.style);
const previewUrl = ref([]);

onMounted(() => {
  setPreviewUrl();
});

// 监听loading
watch(() => props.loading, (val) => {
  loading.value = val;
});
watch(() => props.url, (val) => {
  imageUrl.value = val;
  setPreviewUrl();
});

const setPreviewUrl = () => {
  previewUrl.value = [];
  if (props.preview) {
    previewUrl.value.push(imageUrl.value);
  }
};
</script>

<template>
  <el-skeleton :style="style" :loading="loading" animated>
    <template #template>
      <el-skeleton-item variant="image" :style="style"/>
    </template>
    <template #default>
      <el-image :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2" :preview-src-list="previewUrl"
                style="cursor: pointer;" :style="style" shape="square" :src="imageUrl">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <Picture/>
            </el-icon>
          </div>
        </template>
      </el-image>
    </template>
  </el-skeleton>
</template>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.image-slot .el-icon {
  font-size: 30px;
}
</style>